<template>
  <div class="detailCard bgwrite">
    <!-- 内容 -->

    <div class="top"
         v-if="form.orderType==1">
      <div class="name fz2">{{form.orderName}}</div>
      <div class="content flex fz4">
        <div class="wordsGray">订单编号</div>
        <div class="code">{{form.code}}</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">表&ensp;现&ensp;师</div>
        <div class="con">{{form.buserName}}</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">作图数量</div>
        <div class="con">{{form.countUid}}张</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">初次上门</div>
        <div class="con">{{form.homeTime.slice(0,16)}}</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">预约日期</div>
        <div class="con">{{form.preordainDate.join('、')}}</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">约定地点</div>
        <div class="con">{{form.address}}</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">预付金额</div>
        <div class="con">￥{{form.subsist}}</div>
      </div>
      <div class="content flex fz4"
           v-if="form.totalTime!='00:00:00'">
        <div class="wordsGray">总计时间</div>
        <div>{{form.totalTime}}</div>
        <div class="wordsprimary godetail flex"
             v-if="type=='1'&&form.chronographStatus&&form.chronographStatus>1"
             @click="onCatTimekeep">
          <div class="con">查看计时详情</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%"
                 alt="">
          </div>
        </div>
        <!-- <div class="wordsprimary godetail flex"
             v-if="type=='2'&&form.chronographStatus&&form.chronographStatus!=1&&form.chronographStatus!=4"
             @click="onTimekeep">
          <div class="con">查看计时详情</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%"
                 alt="">
          </div>
        </div> -->
      </div>
      <div class="content flex fz4"
           v-else>
        <div class="wordsGray">总计时间</div>
        <div class="wordsGray">等待计时结算…</div>
      </div>
      <div class="content flex fz4"
           v-if="String(form.subsequentAmount)">
        <div class="wordsGray">尾款金额</div>
        <div class="con" v-if="form.subsequentAmount>0">￥{{form.subsequentAmount}}</div>
        <div v-else>￥--</div>
      </div>
      <div class="content flex fz4" v-else>
        <div class="wordsGray">尾款金额</div>
        <div class="wordsGray">等待计时结算…</div>
      </div>
      <div class="content flex fz4"
           v-if="form.complaintHandling">
        <div class="wordsGray">投诉处理</div>
        <div class="con">{{form.complaintHandling}}</div>
      </div>
      <!-- <div class="content flex fz4"
           v-if="form.refundMoney">
        <div class="wordsGray">退款金额</div>
        <div>{{form.refundMoney}}</div>
      </div> -->
      <div class="regular wordstxt fz4"
           v-if="form.chronographStatus&&form.chronographStatus>1"
           @click="show_regular">尾款计算规则</div>
    </div>
    <div class="top"
         v-else>
      <div class="name fz2">{{form.orderName}}</div>
      <div class="content flex fz4">
        <div class="wordsGray">订单编号</div>
        <div class="code">{{form.code}}</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">改&ensp;图&ensp;师</div>
        <div class="con">{{form.reformerName}}</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">作图数量</div>
        <div class="con">{{form.countUid}}张</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">所需时间</div>
        <div class="con">{{form.countUid}}天</div>
      </div>
      <div class="content flex fz4">
        <div class="wordsGray">改图报价</div>
        <div>￥{{form.subsist}}</div>
      </div>
    </div>
    <div v-if="type=='1'">
      <div class="bot flex flex-space-x"
           v-if="status == 1">
        <div class="botleft unclick  fz4 flex"
             v-on:click="cacleOrder(form.uid)">
          <div class="calceorder wordsprimary">取消订单</div>
        </div>
        <div class="botright flex">
          <div class="bgprimary wordsWrite service fz4"
               @click="open_popup">重选表现师 ({{status1time}})</div>
        </div>
      </div>
      <div data-v-e031109a=""
           v-if="status == 2"
           class="bot flex flex-space-x">
        <div data-v-e031109a=""
             class="botleft wordsGray fz4 flex">待表现师上门</div>
        <div data-v-e031109a=""
             class="botright flex">
          <div data-v-e031109a=""
               class="wordsprimary service fz4"
               v-on:click="cacleOrder(form.uid)">取消订单</div>
        </div>
      </div>
      <div data-v-e031109a=""
           v-if="status == 3"
           class="bot flex flex-space-x">
        <div data-v-e031109a=""
             class="botleft wordsGray fz4 flex">对方已签到，请等候</div>
        <div data-v-e031109a=""
             class="botright flex">
          <div data-v-e031109a=""
               class="wordsprimary service fz4"
               v-on:click="cacleOrder(form.uid)">取消订单</div>
        </div>
      </div>
      <div data-v-e031109a=""
           v-if="status == 4"
           class="bot flex flex-space-x">
        <div data-v-e031109a=""
             class="botleft wordsGray fz4 flex">已到时，对方还未到达</div>
        <div data-v-e031109a=""
             class="botright flex">
          <div data-v-e031109a=""
               class="wordsprimary service fz4"
               v-on:click="cacleOrder(form.uid)">取消订单</div>
        </div>
      </div>
      <div data-v-e031109a=""
           v-if="status == 5"
           class="bot flex flex-space-x">
        <div data-v-e031109a=""
             class="botleft wordsGray fz4 flex">您已取消订单</div>
        <div data-v-e031109a=""
             class="botright flex"
             @click="catRefund(form.refundmoney)">
          <div data-v-e031109a=""
               class="bgprimary wordsWrite  service fz4">查看退款</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 6">
        <div class="botleft unclick wordsprimary fz4 flex"
             v-on:click="cacleOrder(form.uid)">
          <div class="calceorder wordsprimary">取消订单</div>
        </div>
        <div class="botright flex">
          <div class="bgprimary wordsWrite service fz4"
               v-on:click="timeStart(form.uid)">同意开启计时</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 7">
        <div class="botleft flex">
          <div class="wordsGray tit">计时</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{state7time.h}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{state7time.m}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{state7time.s}}</div>
        </div>
        <div class="botright flex"
             v-on:click="onCatTimekeep">
          <div class="wordsprimary fz4">查看计时详情</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 8">
        <div class="botleft flex">
          <div class="wordsGray tit">暂停</div>
          <div class="timeclock bgstart wordsWrite fz2">{{state8time.h}}</div>
          <div class="dots1 fz2">：</div>
          <div class="timeclock bgstart wordsWrite fz2">{{state8time.m}}</div>
          <div class="dots1 fz2">：</div>
          <div class="timeclock bgstart wordsWrite fz2">{{state8time.s}}</div>
        </div>
        <div class="botright flex"
             v-on:click="onCatTimekeep">
          <div class="wordsprimary fz4">查看计时详情</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 9">
        <div class="botleft flex">
          <div class="wordsGray tit">用时</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{state9time.h}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{state9time.m}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{state9time.s}}</div>
        </div>
        <div class="botright flex"
             v-on:click="onCatTimekeep">
          <div class="wordsprimary fz4">超6小时{{state9HPrice}}元/小时</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 911">
        <div class="botleft flex">
          <div class="wordsGray tit">暂停</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{state911time.h}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{state911time.m}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{state911time.s}}</div>
        </div>
        <div class="botright flex"
             v-on:click="onCatTimekeep">
          <div class="wordsprimary fz4">超6小时{{state9HPrice}}元/小时</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 10">
        <!-- v-on:click="reOrder(form.userUid)" -->
        <div class="zailaiyidan"
             style="color: #fff">再来一单</div>
        <div class="botright flex"
             @click="remind('提醒上传图片',form.groupUid,'remindUpload')">
          <div class="bgprimary wordsWrite service fz4">对方未上传，提醒Ta</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 11">
        <div class="zailaiyidan">再来一单</div>
        <div class="botright flex">
          <div class="bgprimary wordsWrite service fz4"
               v-on:click="changePay">结算收图</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 12">
        <div class="botleft unclick  fz4 service zailaiyidan2"
             v-on:click="reOrder(form.buserUid)">再来一单</div>
        <div class="botright flex"
             @click="go_appraise(form, 'b')">
          <div class="bgprimary wordsWrite service fz4">评价</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 13">
        <div class="zailaiyidan2"
             @click="remind('请求改图',form.groupUid,'remindModif')">请求改图</div>
        <div class="botright flex">
          <div class="unclick wordsWrite service fz4">查看详情</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 14">
        <div class="botleft wordsprimary fz4 flex">投诉成功，平台已退款</div>
        <div class="botright flex">
          <div class="unclick wordsWrite service fz4">查看详情</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 15">
        <div class="botleft wordsprimary fz4 flex">改图师到位，付款改图</div>
        <div class="botright flex"
             v-on:click="updateImagePay">
          <div class="bgprimary wordsWrite service fz4">需支付 ¥{{state15Price}}</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 16">
        <div class="botleft wordsGray fz4 flex">改图师暂未上传</div>
        <div class="botright flex"
             @click="remind('提醒改图师上传图片',form.groupUid,'remindUpload')">
          <div class="bgprimary wordsWrite service fz4">催一催</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 17">
        <div class="botleft wordsprimary fz4 flex">图已上传，{{state17day}}天自动确认</div>
        <div class="botright flex">
          <div class="bgprimary wordsWrite service fz4"
               v-on:click="successGetImage">确认收图</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 18">
        <div class="zailaiyidan2"
             @click="remind('请求改图',form.groupUid,'remindModif')">请求改图</div>
        <div class="botright flex"
             @click="go_appraise(form, 'g')">
          <div class="bgprimary wordsWrite service fz4">评论</div>
        </div>
      </div>
      <div class="rightimg">
        <img src="@/assets/img/performance/orderCard/waitService.png"
             v-if="status==1 || status==2 || status==3 || status==4 || status==6"
             width="100%"
             alt="">
        <img src="@/assets/img/performance/orderCard/hasClose.png"
             v-if="status==5 || status==16"
             width="100%"
             alt="">
        <img src="@/assets/img/performance/orderCard/doNow.png"
             width="100%"
             v-if="status==7 || status==8 || status==9 || status==911"
             alt="">
        <img src="@/assets/img/performance/orderCard/waitDrawing.png"
             v-if="status==10 || status==11"
             width="100%"
             alt="">
        <img src="@/assets/img/performance/orderCard/finished.png"
             v-if="status==12 || status==13 || status==14 || status==18"
             width="100%"
             alt="">
        <img src="@/assets/img/performance/orderCard/waitDraw.png"
             v-if="status==15"
             width="100%"
             alt="">
        <img src="@/assets/img/performance/orderCard/waitConfirm.png"
             v-if="status==17 "
             width="100%"
             alt="">
      </div>
    </div>
    <!-- 表现师订单详情 -->
    <div v-if="type=='2'">

      <div class="bot flex flex-space-x"
           v-if="status == 1">
        <div class="botleft wordsGray fz4 flex">半小时内可申请改时</div>
        <div class="botright flex">
          <div class="wordsWrite bgstart service fz4 drakText"
               @click="remind('请求改时',form.groupUid,'remindTime')">请求改时 ({{status1time}})</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status==13">
        <div class="botleft wordsGray fz4 flex">订单被取消</div>
        <div class="botright flex">
          <div class="unclick wordsWrite service fz4">查看详情</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status==2">
        <div class="botleft  wordsGray fz4 flex">请提前半个钟定位签到</div>
        <div class="botright flex">
          <div class="nosign fz4">未到签到时间</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRightG.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status==211">
        <div class="botleft flex">
          <div class="wordsGray tit">倒计</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time211.h}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time211.m}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time211.s}}</div>
        </div>
        <div class="botright flex"
             v-on:click="onClockIn">
          <div class="wordsprimary fz4">去定位签到</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status===3">
        <div class="botleft flex">
          <div class="wordsGray tit"
               style="color: #fe6364;">迟到</div>
          <div class="timeclock bgprimary wordsWrite fz2"
               style="background-color: #fe6364!important;">{{bstate.time3.h}}</div>
          <div class="wordsprimary dots fz2"
               style="color: #fe6364;">：</div>
          <div class="timeclock bgprimary wordsWrite fz2"
               style="background-color: #fe6364!important;">{{bstate.time3.m}}</div>
          <div class="wordsprimary dots fz2"
               style="color: #fe6364;">：</div>
          <div class="timeclock bgprimary wordsWrite fz2"
               style="background-color: #fe6364!important;">{{bstate.time3.s}}</div>
        </div>
        <div class="botright flex"
             v-on:click="onClockIn">
          <div class="wordsprimary fz4"
               style="color: #fe6364;">您已迟到，快去签到</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRightR.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status===4">
        <div class="botleft flex"
             style="opacity: .5;">
          <div class="wordsGray tit">用时</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time3.h}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time3.m}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time3.s}}</div>
        </div>

        <div class="botright flex"
             v-on:click="requestTimeKeep">
          <div class="bgprimary wordsWrite service fz4">请求开启计时</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 5"
           style="opacity: .5;">
        <div class="botleft flex">
          <div class="wordsGray tit">用时</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time3.h}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time3.m}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time3.s}}</div>
        </div>
        <div class="botright flex">
          <div class="bgprimary wordsWrite service fz4">待对方确认开启</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 6">
        <div class="botleft flex">
          <div class="wordsGray tit">用时</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time6.h}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time6.m}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time6.s}}</div>
        </div>
        <div class="botright flex"
             v-on:click="onTimekeep">
          <div class="wordsprimary fz4">进入计时器</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 7">
        <div class="botleft flex">
          <div class="wordsGray tit">暂停</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time7.h}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time7.m}}</div>
          <div class="wordsprimary dots fz2">：</div>
          <div class="timeclock bgprimary wordsWrite fz2">{{bstate.time7.s}}</div>
        </div>
        <div class="botright flex"
             v-on:click="onTimekeep">
          <div class="wordsprimary fz4">进入计时器</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 8">
        <div class="botleft flex">
          <div class="wordsGray tit">计时结束，去上传文件</div>
        </div>
        <div class="botright flex"
             v-on:click="catUploadMethod">
          <div class="wordsprimary fz4">查看上传方法</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status === 9">
        <div class="botleft flex">
          <div class="wordsGray tit">对方未结算收图</div>
        </div>
        <div class="botright flex"
             v-on:click="remind('提醒结算收图', form.groupUid, 'remindOver')">
          <div class="bgprimary wordsWrite service fz4">提醒Ta</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 10">
        <div class="botleft flex">
          <div class="wordsGray tit">对方尚未评价</div>
        </div>
        <div class="botright flex"
             style="opacity: .5">
          <div class="bgprimary wordsWrite service fz4">查看评价</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 11">
        <div class="botleft flex">
          <div class="wordsGray tit">对方给出了评价</div>
        </div>
        <div class="botright flex"
             v-on:click="catAssess(form)">
          <div class="bgprimary wordsWrite service fz4">查看评价</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 12">
        <div class="botleft flex">
          <div class="wordsGray tit redTextButton">对方对你进行了投诉</div>
        </div>
        <div class="botright flex"
             v-on:click="catReview(form.uid,form.orderName)">
          <div class="redBgButton wordsWrite service fz4">查看并申诉</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 16">
        <div class="botleft flex">
          <div class="wordsGray tit redTextButton">对方对你进行了投诉</div>
        </div>
        <div class="botright flex"
             style="opacity: .5">
          <div class="redBgButton wordsWrite service fz4">申诉中</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 14">
        <div class="botleft flex">
          <div class="wordsGray tit">申诉成功</div>
        </div>
        <div class="botright flex">
          <div class="unclick wordsWrite service fz4">查看详情</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 141">
        <div class="botleft flex">
          <div class="wordsGray tit">申诉成功</div>
        </div>
        <div class="botright flex">
          <div class="unclick wordsWrite service fz4">查看详情</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 142">
        <div class="botleft flex">
          <div class="wordsGray tit">申诉成功</div>
        </div>
        <div class="botright flex">
          <div class="unclick wordsWrite service fz4">查看详情</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 15">
        <div class="botleft flex">
          <div class="wordsGray tit redTextButton">申诉失败</div>
        </div>
        <div class="botright flex"
             v-on:click="catDetail(form.uid,'@/assets/img/performance/orderCard/hasClose.png')">
          <div class="redBgButton wordsWrite service fz4">查看处理详情</div>
        </div>
      </div>
      <div class="rightimg">
        <img v-if="status == 1"
             src="@/assets/img/performance/orderCard/waitService.png"
             width="100%" />
        <img v-if="status == 14 || status == 141 || status == 142 || status == 13 || status == 12 || status==16 || status == 15"
             src="@/assets/img/performance/orderCard/hasClose.png"
             width="100%" />
        <img v-if="status == 2 || status==211 || status==3"
             src="@/assets/img/performance/orderCard/waitSign.png"
             width="100%" />
        <img v-if="status == 4 || status==5"
             src="@/assets/img/performance/orderCard/waitStart.png"
             width="100%" />
        <img v-if="status == 6 || status==7"
             src="@/assets/img/performance/orderCard/doNow.png"
             width="100%" />
        <img v-if="status == 8"
             src="@/assets/img/performance/orderCard/waitDrawing.png"
             width="100%" />
        <img v-if="status == 9"
             src="@/assets/img/performance/orderCard/waitBalance.png"
             width="100%" />
        <img v-if="status == 10 || status==11"
             src="@/assets/img/performance/orderCard/finished.png"
             width="100%" />
      </div>
    </div>
    <!-- 改图师 -->
    <div v-if="type == '3'">
      <div class="bot flex flex-space-x"
           v-if="status == 1">
        <div class="botleft flex">
          <div class="wordsGray tit">待对方确认付款</div>
        </div>
        <div class="botright flex"
             v-on:click="remind('提醒付款',form.groupUid,'remindPay')">
          <div class="bgprimary wordsWrite service fz4">提醒Ta</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 2">
        <div class="botleft flex">
          <div class="wordsGray tit">正在改图中</div>
        </div>
        <!-- <div class="botright flex" v-on:click="catUploadMethod">
                        <div class="wordsprimary fz4">查看上传方法</div>
                        <div class="arrowRight">
                            <img src="@/assets/img/performance/orderCard/arrowRight.png" width="100%" />
                        </div>
                    </div> -->
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 3">
        <div class="botleft flex">
          <div class="wordsGray tit">对方已付款，改图完成需上传</div>
        </div>
        <div class="botright flex"
             v-on:click="catUploadMethod">
          <div class="wordsprimary fz4">查看上传方法</div>
          <div class="arrowRight">
            <img src="@/assets/img/performance/orderCard/arrowRight.png"
                 width="100%" />
          </div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 4">
        <div class="botleft flex">
          <div class="wordsGray tit">图已上传，待对方确认</div>
        </div>
        <div class="botright flex"
             v-on:click="remind('提醒确认',form.groupUid,'remindConfirm')">
          <div class="bgprimary wordsWrite service fz4">提醒Ta</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 5">
        <div class="botleft flex">
          <div class="wordsGray tit">待对方评价</div>
        </div>
        <div class="botright flex"
             style="opacity: .5">
          <div class="bgprimary wordsWrite service fz4">查看评价</div>
        </div>
      </div>
      <div class="bot flex flex-space-x"
           v-if="status == 6">
        <div class="botleft flex">
          <div class="wordsGray tit">已评价</div>
        </div>
        <div class="botright flex"
             v-on:click="catAssess(form)">
          <div class="bgprimary wordsWrite service fz4">查看评价</div>
        </div>
      </div>
      <div class="rightimg">
        <img v-if="status == 1"
             src="@/assets/img/performance/orderCard/waitPay.png"
             width="100%" />
        <img v-if="status == 2 || status == 3"
             src="@/assets/img/performance/orderCard/doNow1.png"
             width="100%" />
        <img v-if="status == 4"
             src="@/assets/img/performance/orderCard/waitConfirm.png"
             width="100%" />
        <img v-if="status == 5 || status == 6"
             src="@/assets/img/performance/orderCard/finished.png"
             width="100%" />
      </div>

    </div>
    <div v-if="type=='1'">
      <!-- 点击聊天室 -->
      <div class="msg"
           @click="go_chat(form.groupUid,form.uid)"
           v-if="status!=5&&status!=16">
        <div class="dot"
             v-if="groupUids&&groupUids.includes(form.groupUid)">
          <img src="@/assets/img/performance/orderCard/dot.png"
               width="100%"
               alt="">
        </div>
        <img src="@/assets/img/performance/orderCard/itemMsg.png"
             width="100%"
             alt="">
      </div>
      <!-- 聊天室置灰 -->
      <div class="msg"
           v-else>
        <img src="@/assets/img/performance/orderCard/noChat.png"
             width="100%"
             alt="">
      </div>
    </div>
    <div v-if="type=='2'">
      <!-- 点击聊天室 -->
      <div class="msg"
           @click="go_chat(form.groupUid,form.uid)"
           v-if="status!= 14&&status!= 141&&status!= 142&&status!= 13&&status != 12&&status!=16&& status != 15">
        <div class="dot"
             v-if="groupUids&&groupUids.includes(form.groupUid)">
          <img src="@/assets/img/performance/orderCard/dot.png"
               width="100%"
               alt="">
        </div>
        <img src="@/assets/img/performance/orderCard/itemMsg.png"
             width="100%"
             alt="">
      </div>
      <!-- 聊天室置灰 -->
      <div class="msg"
           v-else>
        <img src="@/assets/img/performance/orderCard/noChat.png"
             width="100%"
             alt="">
      </div>
    </div>
    <div v-if="type=='3'">
      <!-- 点击聊天室 -->
      <div class="msg"
           @click="go_chat(form.groupUid,form.uid)">
        <div class="dot"
             v-if="groupUids&&groupUids.includes(form.groupUid)">
          <img src="@/assets/img/performance/orderCard/dot.png"
               width="100%"
               alt="">
        </div>
        <img src="@/assets/img/performance/orderCard/itemMsg.png"
             width="100%"
             alt="">
      </div>
      <!-- 聊天室置灰 -->
      <!-- <div class="msg"
          v-else>
        <img src="@/assets/img/performance/orderCard/noChat.png"
            width="100%"
            alt="">
      </div> -->
    </div>
  </div>
</template>
<script>
import { formatDate } from "@/utils/date";
import { getuserUid, getUserLogin } from "@/utils/auth.js";
import { setRemind, getRemind } from "@/utils/chat.js";
import { Copy } from "@/utils/object";
import { Fresh, HMS2S, S2HMS, Timekeep, safarigetdate } from "@/utils/date.js";
import constants from "@/components/designer/orderCenter/constant.js";
import { addZero } from "@/utils/_";
import {
  _defaultData,
  _destroyed,
  _methods
} from "@/components/designer/orderCenter/orderCard";
export default {
  props: ["form", "type", "groupUids"],
  data() {
    return Copy(_defaultData);
    // wdurl:require("@/assets/img/performance/orderCard/waitDrawing.png"),
  },
  methods: { 
    ..._methods ,
    show_regular(){
      this.$emit('show_regular')
    },
  },
  destroyed: _destroyed,
  watch: {
    form(v) {
      this.form = v;
      console.log(this.form);
      this.handleData();
    }
  },
  created() {
    // this.handleData();
  },
  filters: {
    datetime1(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  }
};
</script>
<style lang="scss" scoped>
.detailCard {
  position: relative;
  width: 94%;
  margin: auto;
  box-shadow: 0px 2px 8px 4px rgba(216, 216, 216, 0.5);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.24rem;
  .top {
    padding: 0.4rem 0.24rem;
    .name {
      font-weight: bold;
      margin-bottom: 0.1rem;
      width: calc(100% - 1.4rem);
      height: 0.58rem;
      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*不换行*/
      text-overflow: ellipsis; /*超出部分文字以...显示*/
    }
    .content {
      margin-top: 0.2rem;
      .godetail {
        position: absolute;
        width: 2rem;
        right: 0.24rem;
        .con {
          width: calc(100% - 0.24rem);
        }
        .arrowRight {
          position: relative;
          top: 0.02rem;
          width: 0.24rem;
        }
      }
      .con {
        width: calc(100% - 1.35rem);
      }
      div:first-child {
        width: 1.35rem;
      }

      // div:last-child {
      //   flex: 1;
      // }
      .code {
        width: calc(100% - 2.15rem);
        word-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
    .regular {
      margin: auto;
      text-align: center;
      width: 3.5rem;
      height: 0.7rem;
      line-height: 0.7rem;
      border: 1px solid #aaaaaa;
      border-radius: 10px;
      margin-top: 0.4rem;
    }
  }
  .bot {
    background-color: #eff4ff;
    height: 1.08rem;
    .botleft {
      width: 50%;
      align-items: center;
      padding-left: 0.24rem;
      // justify-content: center;
      .tit {
        margin-right: 0.15rem;
      }
      .timeclock {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 6px;
        font-weight: 600;
        text-align: center;
        line-height: 0.6rem;
      }
      .calceorder {
        width: 100%;
        text-align: center;
        font-weight: 600;
      }
      .bgstart {
        background-color: #dfe8ff;
      }
      .dots1 {
        color: #dfe8ff;
        font-weight: 600;
      }
      .dots {
        font-weight: 600;
      }
    }
    .botright {
      align-items: center;
      justify-content: flex-end;

      width: 50%;
      .arrowRight {
        position: relative;
        top: 0.03rem;
        width: 0.24rem;
        margin-left: 0.16rem;
        margin-right: 0.24rem;
      }
      .service {
        height: 1.08rem;
        line-height: 1.08rem;
        width: 100%;
        text-align: center;
        background-color: #dfe8ff;
        font-weight: 600;
      }
      /* 已关闭 */
      .close {
        height: 1.08rem;
        line-height: 1.08rem;
        width: 100%;
        text-align: center;
      }
      /* 待签到 */
      .nosign {
        color: #cccccc;
      }
      /* 待开始 */
      .rbgstart {
        width: 100%;
        height: 100%;
        line-height: 1.08rem;
        text-align: center;
        background-color: #dfe8ff;
      }
    }
    .unclick {
      background-color: #dfe8ff;
    }
  }
  .rightimg {
    position: absolute;
    width: 1.2rem;
    top: 0;
    right: 0;
  }
  .msg {
    position: absolute;
    width: 0.9rem;
    top: 1rem;
    right: 0.3rem;
    .dot {
      position: absolute;
      right: 0.12rem;
      top: 0.12rem;
      width: 0.22rem;
    }
  }
  .drakText {
    color: #5e8efe;
  }
  .redBgButton {
    background-color: #ff5959 !important;
  }
  .redTextButton {
    color: #ff5959 !important;
    font-size: 0.26rem;
  }
  .zailaiyidan {
    color: rgb(255, 255, 255);
    text-align: center;
    background: #dfe8ff;
    width: 50%;
    line-height: 1.08rem;
  }
  .zailaiyidan2 {
    width: 50%;
    text-align: center;
    line-height: 1.08rem;
    color: #5e8efe;
    font-weight: 600;
  }
}
</style>
